import React from 'react'
import { connect } from 'react-redux'
import { addAction, cutAction, addActionAsync } from './store'

// 使用 decorator 代替传统写法
@connect(state => ({num: state}), {addAction, cutAction, addActionAsync})
class App extends React.Component {
  // constructor () {
  //   super()
  // }
  render () {
    console.log(this.props)
    let {num, addAction, cutAction, addActionAsync} = this.props
    return (
      <div>
        <h1>现在是 {num}</h1>
        <button onClick={addAction}>加</button>
        <button onClick={cutAction}>减</button>
        <button onClick={addActionAsync}>加-异步</button>
      </div>
    )
  }
}

// 上边使用装饰器操作代替
// function mapStateToProps(state) {
//   console.log(state)
//   return {
//     num: state
//   }
// }
// const actionCreators = {
//   addAction,
//   cutAction,
//   addActionAsync
// }
// App = connect(mapStateToProps, actionCreators)(App)

export default App